<template>
	<div class="good-list-add-good-wrap">
		<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px">
			<el-form-item label="活动名称：" prop="name">
				<el-input style="width: 60%;" size="small" v-model="formData.name" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="产品名称：" prop="title">
				<el-input style="width: 60%;" size="small" v-model="formData.title" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="主图：" prop="thumb">
				<el-input class="hidden" v-model="formData.thumb"></el-input>
				<img-upload :headerImage.sync="formData.thumb"></img-upload>
			</el-form-item>
			<el-form-item label="banner图：" prop="banner">
				<el-input class="hidden" v-model="formData.banner"></el-input>

				<div class="img-list">
					<div class="img-box" v-for="(item, index) in headerImageList" :key="index">
						<img class="banner-img" :src="item" alt="">
						<i class="el-icon-error del-icon" @click="del(index)"></i>
					</div>

					<img-upload :headerImage.sync="headerImage" :width="128" :height="84" :uploadMore="true"></img-upload>
				</div>

			</el-form-item>
			<el-form-item label="活动价：" prop="activity_price">
				<el-input style="width: 60%;" size="small" v-model="formData.activity_price" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="原价：" prop="market_price">
				<el-input style="width: 60%;" size="small" v-model="formData.market_price" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="备注：">
				<el-input style="width: 60%;" type="textarea" :rows="2" size="small" v-model="formData.remark" placeholder="请输入" clearable>
				</el-input>
			</el-form-item>
			<el-form-item label="规格：">
				<el-input style="width: 60%;" size="small" v-model="formData.specification" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="型号：">
				<el-input style="width: 60%;" size="small" v-model="formData.pattern" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="功率：">
				<el-input style="width: 60%;" size="small" v-model="formData.power" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="材质：">
				<el-input style="width: 60%;" size="small" v-model="formData.material" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="功能配置：">
				<el-input style="width: 60%;" size="small" v-model="formData.peizhi" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="素材" >
				<div class="img-list">
					<div class="img-box" v-for="(item, index) in contentImageList" :key="index">
						<img class="banner-img" :src="item" alt="">
						<i class="el-icon-error del-icon" @click="delContent(index)"></i>
					</div>
			
					<img-upload :headerImage.sync="contentImage" :aspectRatio="false"  :uploadMore="true"></img-upload>
				</div>
			
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :loading="btnLoading" @click="save">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import imgUpload from '@/components/img-upload'
	import {
		Rounding
	} from '@/tool/validate'
	import {
		GOOD_LIST
	} from '@/api/good'
	export default {
		components: {
			imgUpload
		},
		data() {

			const initValidate = (rule, value, callback) => {
				if (!Rounding(value)) {
					callback(new Error('请输入整数类型'));
				}
				callback()
			}

			const {
				id
			} = this.$route.query

			return {
				id,
				headerImageList: [],
				headerImage: '',
				contentImageList: [],
				contentImage: '',
				btnLoading: false,
				formData: {
					name: '',
					title: '',
					thumb: '',
					banner: '',
					activity_price: '',
					market_price: '',
					pattern: '',
					power: '',
					specification: '',
					material: '',
					remark: '',
					peizhi: '',
					content: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'change'
					}],
					title: [{
						required: true,
						message: '请输入产品名称',
						trigger: 'change'
					}],
					thumb: [{
						required: true,
						message: '请上传主图',
						trigger: 'change'
					}],
					banner: [{
						required: true,
						message: '请上传banner图',
						trigger: 'change'
					}],
					activity_price: [{
						required: true,
						message: '请填写活动价',
						trigger: 'change'
					}, {
						validator: initValidate,
						trigger: 'change'
					}],
					market_price: [{
						required: true,
						message: '请填写原价',
						trigger: 'change'
					}, {
						validator: initValidate,
						trigger: 'change'
					}]
				}
			}
		},
		watch: {
			headerImage(val) { //banner图
				if (val) {
					this.headerImageList.push(val)
					this.formData.banner = '1'
				}
			},
			contentImage(val) { //素材图
				if (val) {
					this.contentImageList.push(val)
					this.formData.content = '1'
				}
			}
		},
		mounted() {
			if (this.id) {
				this.getGoodDetail()
			}
		},
		methods: {
			getGoodDetail() { //商品详情
				this.$http.get(`${GOOD_LIST}/${this.id}`)
					.then(res => {
						const {
							name,
							title,
							thumb,
							slide_img,
							activity_price,
							market_price,
							pattern,
							power,
							specification,
							material,
							remark,
							content
						} = res.data

						const slide_img_list = JSON.parse(slide_img)
						for (var key in slide_img_list) {

							this.headerImageList.push(slide_img_list[key])
						}
						
						this.formData = {
							name,
							title,
							thumb,
							banner: '1',
							activity_price: activity_price / 100,
							market_price: market_price / 100,
							pattern,
							power,
							specification,
							material,
							peizhi: '',
							remark
						}
						
						if(content) {
							const contnetJson = JSON.parse(content)
							
							console.log(contnetJson, 22)
							
							this.contentImageList = contnetJson.img
							this.formData.peizhi = contnetJson.peizhi
						}
					})
			},
			del(index) {
				this.headerImageList.splice(index, 1)
				if (!this.headerImageList.length) {
					this.formData.banner = ''
				}
			},
			delContent(index) {
				this.contentImageList.splice(index, 1)
				if (!this.contentImageList.length) {
					this.formData.content = ''
				}
			},
			save() { //添加
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						this.submitAjax()
					}
				})
			},
			submitAjax() {
				this.btnLoading = true
				let params = {}
				const {
					name,
					title,
					thumb,
					activity_price,
					market_price,
					pattern,
					power,
					specification,
					material,
					remark
				} = this.formData
				
				params['name']= name
				params['title'] = title
				params['thumb'] = thumb

				let slideObj = {}
				this.headerImageList.forEach((item, index) => {

					slideObj[index] = item
				})

				params['slide_img'] = JSON.stringify(slideObj)
				params['activity_price'] = activity_price * 100
				params['market_price'] = market_price * 100
				params['specification'] = specification
				params['pattern'] = pattern
				params['power'] = power
				params['material'] = material
				params['remark'] = remark
				
				if(this.contentImageList.length || this.formData.peizhi) {
					let obj = {}
					obj.img = this.contentImageList
					obj.peizhi = this.formData.peizhi
					params['content'] = JSON.stringify(obj)
				}
				
				if(this.id) {
					this.$http.put(`${GOOD_LIST}/${this.id}`, params)
					.then(() => {
						this.$message({
							type: 'success',
							message: '编辑成功'
						})
						this.$router.go(-1)
					})
				}else {
					this.$http.post(GOOD_LIST, params)
					.then(() => {
						this.$message({
							type: 'success',
							message: '添加成功'
						})
						this.$router.go(-1)
					})
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
	.good-list-add-good-wrap {
		.banner-img {
			width: 100px;
			height: 100px;
		}

		.img-list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.img-box {
				position: relative;
				margin-right: 10px;
			}

			.del-icon {
				position: absolute;
				top: 0;
				right: 0;
				margin-right: -10px;
				margin-top: -10px;
				font-size: 24px;
				color: red;
				cursor: pointer;
				z-index: 1;
			}
		}
	}
</style>
